<template>
  <div class="title-post-page">
    <div ref="histogram" ></div>
  </div>
</template>

<script>
export default {
  name: 'TitlePostPage',
  props: {
    title: {
      type: String,
      default: ''
    },
    units: {
      type: String,
      default: ''
    },
    color: {
      type: String,
      default: '#07f5d1'
    },
    AreaNameLIst: {
      type: Array,
      default: []
    },
    densityList: {
      type: Array,
      default: []
    }
  },
  data(){
    return{
      isDataZoom : false ,
      isDataZoomMinSpan:0,
    }
  },
  mounted() {
  },
  methods: {
    // 封装柱图方法
    PostPage(ref) {
      let that = this
      let myChart = that.$echarts.getInstanceByDom(ref)
      if (myChart == undefined) {
        myChart = that.$echarts.init(ref)
      }
      let Opt = {
        title: {
          text: this.title,
          textStyle: {
            color: '#e8edf3',
            fontSize: 18,
            lineHeight: 18,
            fontWeight: 'normal',
            fontFamily: 'Microsoft YaHei',
            overflow: 'truncate',
            width: 150
          },
          padding: [12, 0, 2, 16]
        },
        tooltip: {
          show: true,
          trigger: 'axis',
          renderMode: 'html',
          backgroundColor: '#00000044',
          borderWidth: 0,
          extraCssText: 'box-shadow: 0 0 6px 2px #098e8d;',
          formatter(params, ticket, callback) {
            let htmlStr = ''
            for (let i = 0; i < params.length; i++) {
              let param = params[i]
              let seriesName = param.seriesName//图例名称
              let name = param.name//x轴值
              let value = param.value//y轴值
              let color = param.color//图例颜色
              htmlStr += `
                        <div style="color: #e8edf3">
                          <span style="font-size: 14px">${name}</span>
                          <br>
                          <span style="font-size: 14px!important;color:${color}!important;">
                           ${value}
                          </span>
                          ${seriesName}
                        </div>
                `
            }
            return htmlStr
          }
        },
        dataZoom: [
          {
            type: 'inside',
            start:0,
            end:that.isDataZoomMinSpan,
            minSpan:that.isDataZoomMinSpan,
          },
          {
          showDetail: false, // 拖拽时候是否显示具体数值信息
          showDataShadow: false, // 组件中是否显示数据暗影
          type: 'slider',//图表下方的伸缩条
          show: that.isDataZoom, //是否显示
          height: 9,
          backgroundColor: '#0c2b4f',
          fillerColor: '#707086',//选中区域颜色
          borderColor: 'transparent',
          handleStyle: {
            opacity: 0
          },
          moveHandleStyle: {
            color: '#707086',
            borderColor: 'transparent',
            borderWidth: 0,
            opacity: 1
          },
          textStyle: {
            show: false
          },
          realtime: true, //拖动时，是否实时更新系列的视图
          left: 0,
          right: 0,
          bottom: 0,
          brushSelect: false
        }],
        legend: {
          show: false,
          type: 'plain',
          icon: 'circle',
          top: -2,
          right: -4,
          width: 510,
          align: 'left',
          itemGap: 29,
          itemWidth: 13,
          itemHeight: 13,
          textStyle: {
            color: '#d4d9df',
            padding: [2, 0, 0, 5],
            rich: {
              a: {
                fontSize: 12
              }
            }
          },
          formatter(pars) {
            return `{a|${pars}}`
          },
          data: ['']
        },
        grid: {
          left: 16,
          right: 16,
          bottom: 16,
          top: 40,
          containLabel: true
        },
        xAxis: {
          show: true,
          type: 'category',
          axisTick: {
            'show': false   //去掉x轴刻度线
          },
          axisLabel: {
            color: '#dae0e5',
            margin: 16,
            fontSize: 11,
            formatter: function(value) {
              let valueTxt = ''
              if (value.length > 2) {
                valueTxt = value.substring(0, 2)
              } else {
                valueTxt = value
              }
              return valueTxt
            }
          },
          axisPointer: {
            show: true,
            type: 'shadow',
            label: {
              show: false
            },
            shadowStyle: {
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 1, color: '#0439ca00' },
                { offset: 0.6, color: '#10c2d7' },
                { offset: 0.3, color: '#1079eb' },
                { offset: 0, color: '#1065f1' }
              ]),
              opacity: 0.2
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#e5edf733',
              width: 1,
              type: 'dotted'
            }
          },
          data: this.AreaNameLIst
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              width: 1,
              type: 'dotted',
              color: '#e5edf733'
            }
          },
          axisLabel: {
            show: false
          }
        },
        series: [
          {
            name: this.units,
            type: 'bar',
            data: this.densityList,
            itemStyle: {
              color: this.color
            },
            legendHoverLink: true
          }
        ]
      }
      myChart.setOption(Opt,true)
    },
  },
  watch: {
    'AreaNameLIst': {
      immediate: true,
      deep: true,
      handler: function(val, oldval) {
        if (val.length > 0 && this.densityList.length > 0) {
          if(val.length <= 15){
            this.isDataZoom = false
          }else {
            let num = (15 / val.length).toFixed(2) * 100
            this.isDataZoom = true
            this.isDataZoomMinSpan = num
          }
          this.PostPage(this.$refs.histogram)
        }

      }
    },
    'densityList': {
      immediate: true,
      deep: true,
      handler: function(val, oldval) {
        // console.log(val)
        if (val.length > 0 && this.AreaNameLIst.length > 0) {
          this.PostPage(this.$refs.histogram)
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
.title-post-page {
  width: 100%;
  height: 100%;

  div {
    width: 100%;
    height: 100%;
  }
}
</style>
